<template>
    <div class="academic">
        <Title :title="title" :subtitle="subtitle" :moreUrl="'/academic/meeting'"/>
        <div class="acdemic-content">
            <div class="academic-list">
                <div v-for="item in academicData" :key="item.id" class="academic-card">
                    <div class="content">
                        <nuxtLink :to="localePath(`/academic/meeting/${item.id}`)">
                            <div class="img">
                                <img :src="fileBase + item.image"
                                    alt="">
                            </div>
                            <div class="info">
                                <p class="title">{{ item.title }}</p>
                                <div class="label"
                                    v-for="tag in item.tags" :key="item.id"
                                    :style="{
                                        border: `1px solid ${tag.color}`,
                                        color: tag.color
                                    }"
                                    >
                                    {{ tag.name }}</div>
                                <div class="meta">
                                    <span class="date">{{ formatDate(item.publishDate) }}</span>
                                    <NuxtLink :to="localePath(`/academic/meeting/${item.id}`)" class="more">更多 <span>&gt;&gt;</span></NuxtLink>
                                </div>
                            </div>
                        </nuxtLink>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import Title from '@/components/index/Title.vue'
const { $fetchGov } = useNuxtApp()
import { formatDate } from '@/utils/date'
const localePath = useLocalePath();
const { fileBase } = useRuntimeConfig().public

const { data: academic } = await useAsyncData(
    `academic-${new Date().getTime()}`, 
    () => $fetchGov('/app/api/channel/alias/academic', {
    method: 'GET',
    params: {
        isArticle: true,
        articleTotal: 4,
        _t: Date.now()
    }
}));

const title = computed(() => {
    return academic.value?.data?.name || '';
});

const subtitle = 'Academic exchange'

const academicData = computed(() => {
    return academic.value?.data?.articleList || [];
})


</script>
<style scoped lang="scss">
.academic {
    width: 1200px;
    margin: auto;

    .acdemic-content {
        width: 100%;
        // height: 300px;
        margin-top: 1.5rem;

        // background-color: #ccc;
        .academic-list {
            // display: grid;
            // grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            display: flex;
            justify-content: space-between;
        }

        .academic-card {
            width: calc((100% - 3 * 20px) / 4);
            background: white;
            border-radius: 5px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
            cursor: pointer;

            &:hover {
                transform: translateY(-5px);
            }

            .content {
                a{
                    text-decoration: none;
                }
                .img {
                    width: 100%;
                    height: 12rem;

                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 5px 5px 0 0;
                        overflow: hidden;
                    }
                }

                .info {
                    padding: 1rem;

                    .title {
                        color: #333;
                        font-size: 1rem;
                        line-height: 1.6;
                        margin-bottom: .5rem;
                        //超过2行省略
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                    }

                    .label {
                        color: #999;
                        font-size: 0.8rem;
                        line-height: 1.6;
                        margin-bottom: .7rem;
                        border-radius: 5px;
                        display: inline-block;
                        font-size: .8rem;
                        padding: 2px .5rem;
                        // border: 1px solid #044180;

                        &.label-1 {
                            color: #044180;
                            border: 1px solid #044180;
                        }

                        &.label-2 {
                            color: #19782A;
                            border: 1px solid #19782A;
                        }

                        &.label-3 {
                            color: #420480;
                            border: 1px solid #420480;
                        }

                        &.label-4 {
                            color: #A85535;
                            border: 1px solid #A85535;
                        }
                    }

                    .meta {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        color: #666;
                        font-size: 1rem;

                        .more {
                            color: #666;
                            text-decoration: none;
                            font-size: .9rem;

                            span {
                                vertical-align: 1px;
                            }

                            &:hover {
                                color: #1867CA;
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
        }
    }
    @media screen and (max-width: 768px) {
        width:100%;
        .acdemic-content {
            margin-top: 1rem;
           .academic-list {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap:.8rem;
               .academic-card {
                    width: 100%;
                    .content{
                        .img{
                            height:8rem;
                        }
                    }
                }
            }
        }
    }
}
</style>